<template>
    <div>
        <!-- 表 -->
        <div class="function" style="margin-top: 10px">
            <el-button type="primary" icon="el-icon-plus" @click="addLists">新增</el-button>
            <el-button type="warning" icon="el-icon-download" plain>导出</el-button>
        </div>
        <el-table :data="tableData" class="content" :cell-style="rowClass" :header-cell-style="headClass">
             <el-table-column label="序号" type="index" :index="indexMethod"></el-table-column>
            <el-table-column prop="belongName" label="所属客户"></el-table-column>
            <el-table-column prop="name" label="供应商名称"></el-table-column>
            <el-table-column prop="number" label="供应商编号"></el-table-column>
            <el-table-column prop="contacts" label="联系人"></el-table-column>
            <el-table-column prop="phone" label="手机号码"></el-table-column>
            <el-table-column prop="status" label="启用标志">
                <template slot-scope="scope">
                    {{ scope.row.status == 0 ? '启用' : '停用' }}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="update(scope.row)">修改</el-button>
                    <el-button type="text" size="small">停用</el-button>
                    <el-button type="text" size="small" @click="Deldeli(scope.row.sId)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
            <el-pagination
                background
                style="float: right"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.pageNum"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </div>
        <!-- 添加仓库弹框 -->
        <el-dialog title="添加仓库" :visible.sync="dialogVisible" width="55%" :before-close="handleClose" class="adframe">
            <el-form ref="form" :model="adi">
                <span style="display: block; margin-top: -20px"
                    >供应商名称<el-input placeholder="请输入名称" v-model="adi.name"></el-input
                ></span>
                <span>供应商编号<el-input placeholder="请输入编号" v-model="adi.number"></el-input></span>
                <span>地址<el-input placeholder="请输入地址" v-model="adi.code"></el-input></span>
                <span>联系人<el-input placeholder="请输入联系人" v-model="adi.contacts"></el-input></span>
                <span>手机号码<el-input placeholder="请输入手机号码" v-model="adi.phone"></el-input></span>
                <span
                    >所属客户<el-input v-model="adi.belongName" :disabled="true">
                        <el-button slot="append" @click="dialogTableVisible = true">选择</el-button>
                    </el-input></span
                >
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dw">取 消</el-button>
                <el-button type="primary" @click="conVarSum">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 添加内框 -->
        <el-dialog class="size" title="归属仓储客户选择" :visible.sync="dialogTableVisible">
            <el-table :data="tableData" class="biop">
                <el-table-column prop="belongName" label="名称" width="130"></el-table-column>
                <el-table-column prop="address" label="地址" width="150"></el-table-column>
                <el-table-column prop="contacts" label="联系人" width="130"></el-table-column>
                <el-table-column prop="callNumber" label="电话" width="130"></el-table-column>
                <el-table-column prop="fax" label="传真" width="130"></el-table-column>
                <el-table-column prop="phone" label="手机" width="130"></el-table-column>
                <el-table-column label="操作" fixed="right">
                    <template slot-scope="scope">
                        <el-button @click="Choice(scope.row)">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- <div class="block" style="margin-bottom: 20px; margin-top: 5px">
                <el-pagination
                    background
                    style="float: right"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.pageNum"
                    :page-sizes="[10, 20, 30, 50]"
                    :page-size="page.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="10"
                >
                </el-pagination>
            </div> -->
        </el-dialog>
    </div>
</template>

<script>
import { listConsigneeinformation, idel, iadd, iupt } from '../../api/user.js';
export default {
    data() {
        return {
            // 添加框
            dialogVisible: false,
            // 添加内框
            dialogTableVisible: false,
            // 表数据
            tableData: [],
            // 分页
            page: {
                pageSize: 10,
                pageNum: 1
            },
            total: null,
            //
            adi: {
                belongName: null,
                name: null,
                number: null,
                contacts: null,
                phone: null,
                status: null,
                cId: null,
            }
        };
    },
    methods: {
        // 表头样式设置
        headClass() {
            return 'text-align: center;background:#F8F8F9;color:#515A6D;';
        },
        // 表格样式设置
        rowClass() {
            return 'text-align: center;';
        },
        // 分页点击
        indexMethod(index) {
            return (this.page.pageNum - 1) * this.page.pageSize + index + 1;
        },
        // 分页
        handleSizeChange(val) {
            this.page.pageSize = Number(val);
            console.log(`每页 ${val} 条`);
            this.Rean();
        },
        handleCurrentChange(val) {
            this.page.pageNum = Number(val);
            console.log(`当前页: ${val}`);
            this.Rean();
        },
        // 渲染
        Rean() {
            listConsigneeinformation(this.page).then((res) => {
                this.tableData = res.rows;
                this.total = res.total;
                console.log(res);
            });
        },
        // 删除
        Deldeli(index) {
            console.log(index);
            this.sId = index;
            idel(this.sId).then((res) => {
                console.log(res);
                this.Rean();
            });
        },
        resect() {
            (this.adi.belongName = null),
                (this.adi.cId = null),
                (this.adi.name = null),
                (this.adi.number = null),
                (this.adi.contacts = null),
                (this.adi.phone = null),
                (this.adi.status = null);
        },
        //   添加弹框
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then((_) => {
                    done();
                })
                .catch((_) => {});
        },
        // 添加内框
        Choice(index) {
            this.adi.belongName = index.name;
            this.adi.cId = index.cId;
            this.dialogTableVisible = false;
            console.log(index);
        },
        dw() {
            this.dialogVisible = false;
        },
        //新增按钮
        addLists() {
            this.resect();
            this.dialogVisible = true;
            this.Dialogtitle = '添加仓库';
            this.conVar = 0;
        },
        //修改按钮
        update(k) {
            this.Dialogtitle = '修改仓库';
            this.conVar = 1;
            this.adi = k;
            this.dialogVisible = true;
        },
        //弹框提交
        conVarSum() {
            this.dialogVisible = false;
            if (this.conVar == 0) {
                // console.log("添加");
                iadd(this.adi).then((res) => {
                    console.log(res);
                    this.Rean();
                    this.$message.success('添加成功');
                });
            } else {
                iupt(this.adi).then((res) => {
                    console.log(res);
                    this.Rean();
                    this.$message.success('修改成功');
                });
            }
        }
    },
    mounted() {
        this.Rean();
    }
};
</script>